<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <title>登录</title>
    <link rel="stylesheet" href="./index.css">
    <script src="./img/font/iconfont.js"></script>
    <script src="./img/font_2/iconfont.js"></script>
    <style>
        body{
            height: 100vw;
        }
        .dyh{
            margin-top: 5vw;
            margin-left: 7vw;
        }
        .dyh .icon{
            font-size: 7vw;
        }
        #bt{
            font-weight: bold;
            font-size: 7vw;
            margin-top: 9vw;
            margin-left: 8vw;
        }
        #login{
            margin-top: 12vw;
            margin-left: 8vw;
            margin-right: 8vw;
        }
        #login>div:nth-child(1){
            display: flex;
            border-bottom: 1px solid #ccc;
            padding-bottom: 3vw;
        }
        #login>div:nth-child(1)>a:nth-child(1){
            font-weight: bold;
            font-size: 4vw;
        }
        #login>div:nth-child(1)>a:nth-child(2){
            font-size: 1vw;
            padding-top: 0.7vw;
            padding-left: 1vw;
        }
        #phone::placeholder{
            font-weight: normal;
            font-size: 4vw;
        }
        #phone{
            border: none;
            outline: none;
            font-weight: bold;
            font-size: 5vw;
            padding-left: 5vw;
        }
        #login>div:nth-child(2){
            height: 5vw;
            margin-top: 2vw;
        }
        .error{
            display: none;
            color: red;
            font-size: 3vw;
            text-align: center;
        }
        #login>div:nth-child(3){
            margin-top: 4vw;
        }
        #login>div:nth-child(3)>input{
            width: 100%;
            height: 12vw;
            font-size: 5vw;
            font-weight: bold;
            color: #aaa;
            background-color: #eee;
            border: none;
            margin-bottom: 2.5vw;
        }
        #login>div:nth-child(3)>a{
            font-size: 3.5vw;
        }
        .xm{
            margin-top: 80vw;
            display: flex;
        }
        .xm>a:nth-child(1)>div{
            display: flex;
            margin-left: 5vw;
            width: 43vw;
            height: 10vw;
            border: 1px solid #aaa;
            border-radius: 35vw;
        }
        .xm>a:nth-child(1)>div>.icon{
            padding-left: 4vw;
            padding-top: 3vw;
        }
        .xm>a:nth-child(1)>div>p{
            padding-left: 1vw;
            padding-top: 2vw;
        }
        .xm>a:nth-child(2)>div{
            display: flex;
            margin-left: 3vw;
            width: 43vw;
            height: 10vw;
            border: 1px solid #aaa;
            border-radius: 35vw;
        }
        .xm>a:nth-child(2)>div>.icon{
            padding-left: 10vw;
            padding-top: 3vw;
        }
        .xm>a:nth-child(2)>div>p{
            padding-left: 1vw;
            padding-top: 2vw;
        }
        .down p{
            text-align: center;
            font-size: 2vw;
            color: #aaa;
            margin-top: 1vw;
        }
    </style>
</head>
<body>
    <div class="dyh">
        <a href="./index.html">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-cha"></use>
            </svg>
        </a>
    </div>
    <h3 id="bt">验证码登录</h3>
    <form action="./index.html" method="get" name="login" id="login" onsubmit="return checkform()">
        <div>
            <a href="">+86</a>
            <a href="">▼</a>
            <div class="you">
                <input type="text" name="phone" id="phone" class="input" placeholder="输入手机号">
            </div>
        </div>
        <div><p class="error">手机号错误</p></div>
        <div id="mt">
            <input type="submit" value="获取验证码" id="sub">
            <a href="">密码登录</a>
        </div>
    </form>
    <div class="xm">
        <a href="">
            <div>
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-iphone"></use>
                </svg>
                <p>通过Apple登录</p>
            </div>
        </a>
        <a href="">
            <div>
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-weixin"></use>
                </svg>
                <p>微信登录</p>
            </div>
        </a>
    </div>
    <div class="down">
        <p>注册即代表你同意《小黑盒服务及隐私条款》</p>
    </div>
    <script src="./denglu.js"></script>
</body>
</html>